<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
    <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.css">
    <script type="text/javascript" src="/javascripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/javascripts/bootstrap.js"></script>

    <style>
        .table-div .caption {
            font-size: 30px;

        }
        .table-div {

            margin: 40px;
        }
        .input-costom{

            width: 130px;
            ;
        }
    </style>

    <script type="text/javascript" >
        $(document).ready(function(){
            $("#top").load("../top.html");
            $("#left").load("../left.html");
            $("#bottom").load("../bottom.html");
//            $("#right").load("");
        });
    </script>
</head>
<body >
<div id="top">
    % include ../top.ejs%>
</div>
<div class="container-fluid" style="margin-top: 20px;">
    <div class="row">
        <div class="col-md-1">
        </div>
        <div id="left" class="col-md-2">

        </div>
        <div class="col-md-8 bodyDiv" id="right">

                <div class="table-div">
                    <span class="caption">活动列表</span>
                    <div class="row">
                        <div class="col-md-6"></div>
                        <div class="col-md-2">

                            <div class="dropdown">
                                <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
                                        data-toggle="dropdown">
                                    选择查找
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="-1" href="#">活动主题</a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="-1" href="#">开始时间</a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="-1" href="#">
                                            限制人数
                                        </a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="-1" href="#">活动地点</a>
                                    </li>
                                </ul>
                            </div>

                        </div>

                        <div class="col-md-2  input-costom " >
                            <input type="text" class="form-control">
                        </div>
                        <div class="col-md-2">
                        <button type="button" class="btn btn-default">搜索</button>
                        </div>
                    </div>
                    <table class="table table-striped">

                        <thead>
                        <tr>
                            <th>活动主题</th>
                            <th>开始时间</th>
                            <th>限制人数</th>
                            <th>活动地点</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>篮球</td>
                            <td>2015.02.30</td>
                            <td>10</td>
                            <td>篮球馆</td>
                            <td><span class="label label-info"><a href="activityDetail.html">查看详情</a></span></td>
                        </tr>
                        <tr>
                            <td>足球</td>
                            <td>2015.01.30</td>
                            <td>10</td>
                            <td>操场</td>
                            <td><span class="label label-info"><a href="#">查看详情</a></span></td>
                        </tr>
                        <tr>
                            <td>郊游</td>
                            <td>2014.02.30</td>
                            <td>10</td>
                            <td>公园</td>
                            <td><span class="label label-info"><a href="#">查看详情</a></span></td>
                        </tr>
                        <tr>
                            <td>篮球</td>
                            <td>2015.02.30</td>
                            <td>10</td>
                            <td>篮球馆</td>
                            <td><span class="label label-info"><a href="#">查看详情</a></span></td>
                        </tr>



                        </tbody>

                    </table>

                </div>
            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-6">
                    <ul class="pagination">
                        <li><a href="#">&laquo;</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">&raquo;</a></li>
                    </ul>
                </div>

            </div>

        </div>

        </div>
    </div>
</div>
<div id="bottom"></div>
</body>
</html>